<template>
  <div class="Home" id="scroll" ref="scroll">
    <template>
      <el-backtop
        target=".Home"
        :right="0"
        :bottom="0"
        style="width:0px;heighr:0px;z-index: 99999;"
      >
        <div class="back-ball">回到顶部</div>
      </el-backtop>
    </template>
    <div class="Home-header">
      <div class="Home-header-both">
        <div class="Home-header-menu-left">昨日头条</div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo Home-header-menu-ringth"
          mode="horizontal"
          @select="handleSelect"
          text-color="#fff"
          active-text-color="#ffd04b"
          background-color="#1a1a1a"
          :router="true"
        >
          <el-menu-item index="首页" route="/home/index">首页</el-menu-item>
          <el-submenu index="分类">
            <template slot="title">新闻类别</template>
            <el-menu-item
              :index="type.typeName"
              v-for="(type, index) in typeList"
              :key="index"
              @click="goType(type.typeName)"
            >{{type.typeName}}</el-menu-item>
          </el-submenu>
          <el-menu-item index="添加新闻" route="/home/add">添加新闻</el-menu-item>
          <el-menu-item index="登录" route="/login/login">登录</el-menu-item>
        </el-menu>
      </div>
    </div>
    <router-view style="width: 1170px;margin: 0 auto;  min-height: 600px;"></router-view>
    <page-footer></page-footer>
  </div>
</template>
<script>
import pageFooter from "../components/Comm/pagefooter";
import { typeListAll_user } from "../ajax/index";
export default {
  data() {
    return {
      activeIndex: "首页",
      typeList: []
    };
  },
  created() {
    this.getTypeAll();
  },
  methods: {
    handleSelect() {},
    getTypeAll() {
      typeListAll_user().then(res => {
        if (res.code) {
          this.typeList = res.data.data;
        }
      });
    },
    goType(newsType) {
      this.$router.push({ path: "/home/type", query: { newsType: newsType } });
    }
  },
  components: {
    pageFooter
  }
};
</script>
<style lang="scss">
.el-menu--popup-bottom-start {
  margin-top: 0px;
}
.el-menu--horizontal .el-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
}
.Home {
  img {
    height: 100%;
    width: 100%;
  }
  overflow-x: hidden;
  height: 100vh;
  .Home-header {
    box-sizing: content-box;
    background-color: #1a1a1a;
    .Home-header-both {
      display: flex;
      height: 100px;
      justify-content: space-between;
      width: 1170px;
      margin: 0px auto;
      .Home-header-menu-ringth {
        height: 100px;
      }
      .el-menu--horizontal > .el-menu-item,
      .el-menu--horizontal > .el-submenu,
      .el-menu--horizontal > .el-submenu .el-submenu__title {
        height: 100px;
        line-height: 100px;
        font-size: 20px;
      }
      .Home-header-menu-left {
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        color: #fff;
      }
    }
  }

  .Home-footer-botton {
    display: flex;
    overflow: hidden;
    background: #282828;
    color: #9e9e9e;
    padding-top: 80px;
    margin-top: -10px;
    justify-content: space-around;
    height: 572px;
    .Home-footer-botton-left {
      display: flex;
      dl {
        padding-right: 54px;
        dt {
          font-size: 16px;
          color: #fff;
          padding-bottom: 11px;
        }
        dd {
          line-height: 25px;
          font-size: 12px;
        }
      }
    }
    .Home-footer-botton-center {
      width: 312px;
      padding-left: 72px;
      border-left: solid 1px #4e4943;
      dt {
        padding-bottom: 0;
        margin-bottom: 5px;
      }
      .dl {
        font-size: 10px;
      }
      dl dt {
        font-size: 16px;
        color: #fff;
      }
      .Home-footer-botton-center-span {
        color: #c0af93;
        font-size: 14px;
      }
      .Home-footer-botton-center-from {
        margin-top: 20px;
        overflow: hidden;
        border-bottom: solid 1px #4e4943;
        padding-bottom: 27px;
        margin-bottom: 27px;
        .Home-footer-botton-center-name {
          width: 246px;
          height: 38px;
          line-height: 38px;
          float: left;
          background: #1a1a1a;
          color: #fff;
          border: none;
          margin-bottom: 14px;
          text-indent: 10px;
        }
        .Home-footer-botton-center-photo {
          width: 246px;
          height: 38px;
          line-height: 38px;
          float: left;
          background: #1a1a1a;
          color: #fff;
          border: none;
          margin-bottom: 14px;
          text-indent: 10px;
        }
        .Home-footer-botton-center-submit {
          width: 246px;
          background: #646464;
          color: #fff;
          text-indent: 0;
          cursor: pointer;
          width: 246px;
          height: 38px;
          line-height: 38px;
          float: left;
          background: #1a1a1a;
          color: #fff;
          border: none;
          margin-bottom: 14px;
        }
      }
    }
    .Home-footer-botton-ringht {
      padding-left: 20px;
    }
  }
  .Home-botton {
    width: 100%;
    .Home-botton-both {
      position: relative;
      .Home-botton-img {
        height: 451px;
      }
      .Home-botton-txt {
        position: absolute;
        bottom: 0px;
        z-index: 100;
        height: 54px;
        width: 100vw;
        background-color: #000;
        opacity: 0.5;
        .Home-botton-txt-ul {
          display: flex;
          justify-content: center;
          .Home-botton-txt-li {
            height: 100%;
            line-height: 54px;
            color: #ccc;
            margin-left: 54px;
          }
        }
      }
    }
  }
  .back-ball {
    background-color: tomato;
    color: #fff;
    border-radius: 22px;
    padding: 10px;
    position: fixed;
    bottom: 40px;
    right: 60px;
    width: 20px;
    z-index: 99999;
  }
}
</style>